import { Instagram, Facebook, Mail } from 'lucide-react';

// Custom X (Twitter) Logo Component
const XLogo = ({ size = 20, className = "" }: { size?: number; className?: string }) => (
  <svg 
    width={size} 
    height={size} 
    viewBox="0 0 24 24" 
    fill="currentColor" 
    className={className}
  >
    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
  </svg>
);

export function Footer() {
  return <footer className="w-full bg-[#061a2c] text-white pt-12 pb-6 px-4 md:px-8">
      <div className="container mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
          <div>
            <div className="flex items-center space-x-3 mb-4">
              <div className="w-8 h-8 rounded-lg bg-[#06d6a0] bg-opacity-10 flex items-center justify-center">
                <svg width="18" height="18" viewBox="0 0 36 36" fill="none">
                  <path d="M8 6 Q18 12 8 18 Q18 24 8 30" stroke="#06d6a0" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
                  <path d="M28 6 Q18 12 28 18 Q18 24 28 30" stroke="#06d6a0" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
                  <line x1="12" y1="12" x2="24" y2="12" stroke="#06d6a0" strokeWidth="1.5" opacity="0.7"/>
                  <line x1="12" y1="24" x2="24" y2="24" stroke="#06d6a0" strokeWidth="1.5" opacity="0.7"/>
                  <circle cx="18" cy="18" r="6" fill="#061a2c" opacity="0.9"/>
                  <path d="M15 18 L21 18 M18 15 L18 21" stroke="#06d6a0" strokeWidth="2" strokeLinecap="round"/>
                </svg>
              </div>
              <h3 className="text-xl font-bold">
                <span className="text-[#06d6a0]">Vita</span>Incubator
              </h3>
            </div>
            <p className="text-gray-300 mb-4">
              Your trusted guide to health and wellness products that actually
              work.
            </p>
            <div className="flex space-x-4">
              <a href="https://x.com/vitaincubator" target="_blank" rel="noopener noreferrer" aria-label="X (Twitter)" className="text-gray-300 hover:text-[#06d6a0]">
                <XLogo size={20} />
              </a>
              <a href="https://instagram.com/vitaincubator" target="_blank" rel="noopener noreferrer" aria-label="Instagram" className="text-gray-300 hover:text-[#06d6a0]">
                <Instagram size={20} />
              </a>
              <a href="https://facebook.com/vitaincubator" target="_blank" rel="noopener noreferrer" aria-label="Facebook" className="text-gray-300 hover:text-[#06d6a0]">
                <Facebook size={20} />
              </a>
            </div>
          </div>
          <div>
            <h3 className="text-lg font-bold mb-4">Categories</h3>
            <ul className="space-y-2">
              <li>
                <a href="/reviews" className="text-gray-300 hover:text-[#06d6a0]">
                  Massage Guns
                </a>
              </li>
              <li>
                <a href="/reviews" className="text-gray-300 hover:text-[#06d6a0]">
                  Standing Desks
                </a>
              </li>
              <li>
                <a href="/reviews" className="text-gray-300 hover:text-[#06d6a0]">
                  Sleep Technology
                </a>
              </li>
              <li>
                <a href="/reviews" className="text-gray-300 hover:text-[#06d6a0]">
                  Home Gym
                </a>
              </li>
            </ul>
          </div>
          <div>
            <h3 className="text-lg font-bold mb-4">Company</h3>
            <ul className="space-y-2">
              <li>
                <a href="/about" className="text-gray-300 hover:text-[#06d6a0]">
                  About Us
                </a>
              </li>
              <li>
                <a href="/guides" className="text-gray-300 hover:text-[#06d6a0]">
                  Our Process
                </a>
              </li>
              <li>
                <a href="/contact" className="text-gray-300 hover:text-[#06d6a0]">
                  Contact
                </a>
              </li>
            </ul>
          </div>
          <div>
            <h3 className="text-lg font-bold mb-4">Stay Updated</h3>
            <p className="text-gray-300 mb-4">
              Get the latest reviews and guides straight to your inbox.
            </p>
            <form className="flex">
              <input type="email" placeholder="Your email" className="bg-[#0d2b47] text-white px-4 py-2 rounded-l outline-none flex-grow" aria-label="Email address" />
              <button type="submit" aria-label="Subscribe" className="bg-[#06d6a0] text-[#0a2540] px-4 py-2 rounded-r font-medium hover:bg-[#05c090] transition-colors">
                <Mail size={20} />
              </button>
            </form>
          </div>
        </div>
        <div className="border-t border-[#1a3a5c] pt-6 mt-6">
          <div className="flex flex-col md:flex-row justify-between items-center">
            <p className="text-sm text-gray-400 mb-4 md:mb-0">
              © {new Date().getFullYear()} VitaIncubator. All rights reserved.
            </p>
            <div className="flex space-x-6">
              <a href="/privacy-policy" className="text-sm text-gray-400 hover:text-[#06d6a0]">
                Privacy Policy
              </a>
              <a href="/terms-of-service" className="text-sm text-gray-400 hover:text-[#06d6a0]">
                Terms of Service
              </a>
              <a href="/affiliate-disclosure" className="text-sm text-gray-400 hover:text-[#06d6a0]">
                Affiliate Disclosure
              </a>
            </div>
          </div>
          <p className="text-xs text-gray-500 mt-4 text-center md:text-left">
            VitaIncubator participates in affiliate programs and may earn
            commissions on purchases made through our links. This does not
            affect our review standards or recommendations.
          </p>
        </div>
      </div>
    </footer>;
}